<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>跑来跑去的跳动的心</title>
<style> 
div
{
	width:600px;
	height:600px;
	background:white;
	position:relative;
	animation-name:myfirst;
	animation-duration:5s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}



@keyframes myfirst
{
	0%   {background:white; left:800px; top:300px;}
	25%  {background:white; left:700px; top:200px;}
	50%  {background:white; left:200px; top:200px;}
	75%  {background:white; left:600px; top:200px;}
	100% {background:white; left:800px; top:300px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:white; left:200px; top:400px;}
	25%  {background:white; left:200px; top:500px;}
	50%  {background:white; left:200px; top:200px;}
	75%  {background:white; left:700px; top:200px;}
	100% {background:white; left:900px; top:300px;}
}
</style>
</head>
<body>


<div><svg class="heart" width="15%" aria-hidden="true" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z">
     </path><animate attributeName="fill-opacity" attributeType="CSS" values="1;0.6;1" begin="0s" dur="0.8s" repeatCount="indefinite"></animate>
</div></svg>


</body>
</html>
